84:I[903690,["/chat-static/_next/static/immutable/chunks/2b75ildtv3myf.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/0k8xwdx3dazwi.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0znv-saj_9omo.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2z8pc3a6_tk5s.js","/chat-static/_next/static/immutable/chunks/33gy6rv7z29e-.js","/chat-static/_next/static/immutable/chunks/43zma2pkpdkjx.js","/chat-static/_next/static/immutable/chunks/1fhqvawdycviw.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3afbgo6rex_vb.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/03ug0e28spr-r.js","/chat-static/_next/static/immutable/chunks/25c165o1owp5w.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/2yftv5m77a_ya.js","/chat-static/_next/static/immutable/chunks/37vyim_j6k8zg.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2qnxvxvoeqa54.js","/chat-static/_next/static/immutable/chunks/3a69lcep90z-5.js","/chat-static/_next/static/immutable/chunks/0cf7c5y80zn5y.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/01pxlv-t_dewh.js"],"ExplicitChatIdProvider"] 85:I[838238,["/chat-static/_next/static/immutable/chunks/2b75ildtv3myf.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/0k8xwdx3dazwi.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0znv-saj_9omo.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2z8pc3a6_tk5s.js","/chat-static/_next/static/immutable/chunks/33gy6rv7z29e-.js","/chat-static/_next/static/immutable/chunks/43zma2pkpdkjx.js","/chat-static/_next/static/immutable/chunks/1fhqvawdycviw.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3afbgo6rex_vb.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/03ug0e28spr-r.js","/chat-static/_next/static/immutable/chunks/25c165o1owp5w.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/2yftv5m77a_ya.js","/chat-static/_next/static/immutable/chunks/37vyim_j6k8zg.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2qnxvxvoeqa54.js","/chat-static/_next/static/immutable/chunks/3a69lcep90z-5.js","/chat-static/_next/static/immutable/chunks/0cf7c5y80zn5y.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/01pxlv-t_dewh.js"],"SWRDataProvider"] 86:T3fb7,[V0_FILE]typescriptreact:file="utils/colorConversions.ts" isMerged="true" import { oklch, rgb, formatHex } from 'culori'; export function oklchToRgb(l: number, c: number, h: number): string { const rgbColor = rgb(oklch({ l: l / 100, c: c / 100, h })); return rgbColor ? `rgb(${Math.round(rgbColor.r * 255)}, ${Math.round(rgbColor.g * 255)}, ${Math.round(rgbColor.b * 255)})` : 'rgb(0, 0, 0)'; } export function oklchToHex(l: number, c: number, h: number): string { return formatHex(oklch({ l: l / 100, c: c / 100, h })) || '#000000'; } export function getSpectrumColor(x: number, y: number, l: number): string { const c = x * 0.4; // Max chroma is 0.4 in OKLCH const h = y * 360; return oklchToRgb(l, c * 100, h); } export function isValidOklch(l: number, c: number, h: number): boolean { const rgbColor = rgb(oklch({ l: l / 100, c: c / 100, h })); return rgbColor !== null && rgbColor.r >= 0 && rgbColor.r <= 1 && rgbColor.g >= 0 && rgbColor.g <= 1 && rgbColor.b >= 0 && rgbColor.b <= 1; } export async function copyToClipboard(text: string): Promise { try { await navigator.clipboard.writeText(text); } catch (err) { console.error('Failed to copy text: ', err); } } export function generateColorPalette(l: number, c: number, h: number, count: number, tintStrength: number): string[] { const baseColor = oklch({ l: l / 100, c: c / 100, h }); const palette = []; const step = 1 / (count - 1); for (let i = 0; i < count; i++) { const factor = i * step; const newL = Math.max(0, Math.min(1, baseColor.l + factor * tintStrength)); const newC = Math.max(0, Math.min(0.4, baseColor.c * (1 - factor * tintStrength))); const shade = oklch({ l: newL, c: newC, h: baseColor.h }); palette.push(formatHex(shade) || '#000000'); } return palette; } export function createSvgPalette(colors: string[]): string { const svgWidth = 200; const svgHeight = 50; const rectWidth = svgWidth / colors.length; const rects = colors.map((color, index) => `` ).join(''); return ``; } [V0_FILE]typescriptreact:file="components/Slider.tsx" isMerged="true" import React from 'react'; interface SliderProps { value: number; onChange: (value: number) => void; min: number; max: number; step: number; label: string; } export function Slider({ value, onChange, min, max, step, label }: SliderProps) { return (

{label} onChange(parseFloat(e.target.value))} className="w-full" /> {value.toFixed(2)}

); } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { OKLCHColorPicker } from '../components/OKLCHColorPicker'; import { Toaster } from "@/components/ui/toaster" export default function Home() { return (

OKLCH Color Picker

); } [V0_FILE]typescriptreact:file="components/NumberInput.tsx" isMerged="true" import React from 'react'; import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" interface NumberInputProps { value: number; onChange: (value: number) => void; min: number; max: number; step: number; label: string; id: string; } export function NumberInput({ value, onChange, min, max, step, label, id }: NumberInputProps) { return (

{label} { const newValue = parseFloat(e.target.value); if (!isNaN(newValue) && newValue >= min && newValue <= max) { onChange(newValue); } }} className="w-20" />

); } [V0_FILE]typescriptreact:file="components/ColorSpectrum.tsx" isMerged="true" import React, { useRef, useEffect, useState } from 'react'; import { getSpectrumColor, isValidOklch } from '../utils/colorConversions'; interface ColorSpectrumProps { lightness: number; chroma: number; hue: number; onChange: (chroma: number, hue: number) => void; } export function ColorSpectrum({ lightness, chroma, hue, onChange }: ColorSpectrumProps) { const canvasRef = useRef(null); const [isDragging, setIsDragging] = useState(false); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const width = canvas.width; const height = canvas.height; for (let x = 0; x < width; x++) { for (let y = 0; y < height; y++) { const c = (x / width) * 40; const h = (1 - y / height) * 360; if (isValidOklch(lightness, c, h)) { ctx.fillStyle = getSpectrumColor(x / width, 1 - y / height, lightness); } else { ctx.fillStyle = '#CCCCCC'; // Gray for invalid colors } ctx.fillRect(x, y, 1, 1); } } // Draw current color position const x = (chroma / 40) * width; const y = (1 - hue / 360) * height; ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.strokeStyle = lightness > 50 ? 'black' : 'white'; ctx.stroke(); }, [lightness, chroma, hue]); const handleInteraction = (e: React.MouseEvent | React.TouchEvent) => { const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); let x, y; if ('touches' in e) { x = e.touches[0].clientX - rect.left; y = e.touches[0].clientY - rect.top; } else { x = e.clientX - rect.left; y = e.clientY - rect.top; } const newChroma = (x / rect.width) * 40; const newHue = (1 - y / rect.height) * 360; if (isValidOklch(lightness, newChroma, newHue)) { onChange(newChroma, newHue); } }; return (

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This